Form Design - Entry Ballot for Air Miles
As a challenge, I redesigned a form to make it human-centered, easier to use and understand, while still providing all the information. Below are some of the design decisions. See the
Design Decisions
1) The instructions for each field are built into the fields themselves and greyed out. When a user types in a field, their input will be darker. See Mailing Address fields for reference.
2) To create a visual relationship between text fields in the same section, there is double the amount spacing between the different sections than between text fields in a similair area, subtly grouping sections together
3) Used a slight gradient that gets darker to the bottom. This:
- encourages the user to keep scrolling by creating a sense of movement, and
- creates vertical flow by keeping the grid format from overwhelming,
- lets the user visually and instinctively know that the form is closer to completion.
4) Removed all *s to show required fields, and instead indicated which ones are optional with a greyed out colour (see last checkbox regarding marketing updates). This reduces clutter and takes one less step of cognition for the user.
5) Removed an option for the country, as this contest is only available to Canadians. This reduces both invalid entries and confusion from the users.
6) Built-in feedback for correct and incorrect inputs. Once a user types in content into a text field, it will either give you a green beside your answer to indicate a correct input, or the box will be bordered with red and provide further instructions underneath. See Mailing Address section for more a visual. Imagine the form all filled out with lots of green checkboxes, creating a positive feedback and encourages the user to fill out the form completely, especially when it gets closer to the end.
7) Changed the Skill Testing question to a ReCaptcha as it's easier for the user. This assumes that the legal and marketing departments are ok with this change :)
8) Made the wording more conversational and conversion-focused. This is most apparent on the entry button, "Enter Contest!" at the bottom. By using a vivid verb, "Enter" and an exclamation mark, we are creating excitement and encourages the user to complete the form
9) The Facebook Like button is more prominent. It got changed to a larger, more prominent version inline with the ReCaptcha so it's harder to miss.
To show brand authority, build trust, and contribute to AIR MILES overall objective of gaining brand followers, the counter was changed from counting the number of people who like the form itself (272), to the number of people who like the AIR MILES brand (33,000).
I decided against putting an optional tag on this section as Facebook users are preconditioned to know that liking a page as optional.
10) The grid format looks clean, beautiful, and can be easily be built to be responsive.
11) I also switched the brand to AIR MILES, because it was more congruent and because this isn't a real client!
Redesigned Form:
Original Form:
